import "./index.css"
/**
 * @ngComponent debounceComponent
 * @type {ng.IComponentOptions}
 */
const debounceComponent = {
  controller: class DebounceController {
    constructor() {
      // 获取Canvas元素和上下文
      const canvas = document.getElementById("myCanvas");
      const ctx = canvas.getContext("2d");

      // 控制变量
      let showTrail = false;
      let balls = [];

      // 小球类
      class Ball {
        constructor(x, y, radius, color) {
          this.x = x;
          this.y = y;
          this.radius = radius;
          this.color = color;
          this.dx = (Math.random() - 0.5) * 8;
          this.dy = (Math.random() - 0.5) * 8;
        }

        // 绘制小球
        draw() {
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
          ctx.fillStyle = this.color;
          ctx.fill();
          ctx.closePath();
        }

        // 更新小球位置
        update() {
          // 边界检测
          if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
            this.dx = -this.dx;
          }
          if (
            this.y + this.radius > canvas.height ||
            this.y - this.radius < 0
          ) {
            this.dy = -this.dy;
          }

          // 更新位置
          this.x += this.dx;
          this.y += this.dy;

          // 绘制小球
          this.draw();
        }
      }

      // 初始化小球
      function initBalls() {
        balls = [];
        const colors = [
          "#FF5252",
          "#4CAF50",
          "#2196F3",
          "#FFC107",
          "#9C27B0",
          "#00BCD4",
        ];

        // 创建初始小球
        for (let i = 0; i < 5; i++) {
          const radius = Math.random() * 20 + 10;
          const x = Math.random() * (canvas.width - radius * 2) + radius;
          const y = Math.random() * (canvas.height - radius * 2) + radius;
          const color = colors[Math.floor(Math.random() * colors.length)];
          balls.push(new Ball(x, y, radius, color));
        }
      }

      // 动画循环
      function animate() {
        // 如果开启轨迹效果，则不清除画布，使用半透明矩形制造拖尾效果
        if (showTrail) {
          ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
          ctx.fillRect(0, 0, canvas.width, canvas.height);
        } else {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

        // 更新并绘制所有小球
        balls.forEach((ball) => ball.update());

        requestAnimationFrame(animate);
      }

      // 添加新小球
      function addBall() {
        const colors = [
          "#FF5252",
          "#4CAF50",
          "#2196F3",
          "#FFC107",
          "#9C27B0",
          "#00BCD4",
        ];
        const radius = Math.random() * 20 + 10;
        const x = Math.random() * (canvas.width - radius * 2) + radius;
        const y = Math.random() * (canvas.height - radius * 2) + radius;
        const color = colors[Math.floor(Math.random() * colors.length)];
        balls.push(new Ball(x, y, radius, color));
      }

      // 改变所有小球颜色
      function changeColors() {
        const colors = [
          "#FF5252",
          "#4CAF50",
          "#2196F3",
          "#FFC107",
          "#9C27B0",
          "#00BCD4",
        ];
        balls.forEach((ball) => {
          ball.color = colors[Math.floor(Math.random() * colors.length)];
        });
      }

      // 事件监听
      document.getElementById("addBall").addEventListener("click", addBall);
      document.getElementById("reset").addEventListener("click", initBalls);
      document
        .getElementById("toggleTrail")
        .addEventListener("click", function () {
          showTrail = !showTrail;
          this.textContent = showTrail ? "关闭轨迹" : "轨迹效果";
        });
      document
        .getElementById("changeColor")
        .addEventListener("click", changeColors);

      // 初始化并启动动画
      initBalls();
      animate();
    }
    $postLink() {
      const canvas = document.querySelector("#myCanvas");
      const ctx = canvas.getContext("2d");
    }
  },
  template: `
      <div class="container">
        <h1>Canvas小球弹跳动画</h1>
        <p>小球会在画布边框内不断反弹，点击按钮可以添加更多小球</p>
        <canvas id="myCanvas" width="700" height="400"></canvas>
        <div class="controls">
            <button id="addBall">添加小球</button>
            <button id="reset">重置</button>
            <button id="toggleTrail">轨迹效果</button>
            <button id="changeColor">改变颜色</button>
        </div>
      </div>
    `,
};

/**
 * @param {ng.IModule} module 
 * @returns {void}
 */
export default function DebounceComponentLoader(module) {
  return void module.component("debounceComponent", debounceComponent);
}
